<template>
    <view class="wy-form-group wy-form-item" :class="[themeName,model.theme.box.class]" :style="model.theme.box.style">
        <template v-if="itemDiplay">
            <view v-if="model.showHead" class="wy-flex-row wy-ps-all-s wy-justify-center wy-text-bold wy-border-bottom wy-form-group-title" :class="[model.theme.head.class,contentDisplayClass]" :style="model.theme.head.style" @click="changeState">
            	<view class="wy-flex-row wy-flex-1" v-if="model.showTitle" :class="[model.theme.title.class]" :style="model.theme.title.style">
            		<wy-icon v-if="model.icon" :name="model.icon" :iconClass="model.theme.icon.class" :iconStyle="model.theme.icon.style" :type="model.theme.icon.type"></wy-icon>
                    <text v-if="model.title" class="wy-size-l wy-color-text">{{locale(model.title)}}</text>
            		<slot name="title"></slot>
            	</view> 
            	<view  :class="[model.theme.action.class]" :style="model.theme.action.style" class="wy-flex-row" v-if="model.showAction">
            		<text v-if="model.action" :class="['wy-color-text','wy-size-base',actionTheme.class]" :style="actionTheme.style"> {{model.action}}</text>
            	    <wy-icon @iconClicked="changeState" :name="actionTheme.name" :iconClass="actionTheme.class" :iconStyle="actionTheme.style" :type="actionTheme.type"></wy-icon>
            	</view>
            	<slot name="action"></slot>
            </view>
        </template> 
        <view class="wy-form-group-content" :class="[contentClass,model.theme.content.class,contentDisplayClass]" :style="contentStyle+model.theme.content.style+contentDisplayStyle">
            <slot ></slot>
        </view>     
    </view>
</template>

<script>
   import {wyGroup} from '../../libs/form.js';
   import {wyProps} from '../../libs/props.js';
   export default { 
        name:'wy-form-group',
        mixins: [wyProps,wyGroup],
        computed:{
            contentDisplayClass(){
                // #ifdef APP-NVUE || MP
                return 'wy-form-group-width-'+(this.wyLevel?this.wyLevel:0)
                // #endif
                return ''
            },
            actionTheme(){
            	if(this.model.open){
            		return this.model.theme.fold
            	}
            	else{
            		return this.model.theme.unfold
            	}
            }, 
            contentDisplayStyle(){
                // #ifdef APP-NVUE
                return ''//this.model.open?'':'height:0 !important;'
                // #endif
                // #ifndef APP-NVUE
                 return this.model.open?'':'display: none;'
                // #endif 
            }
        },
        mounted() {
            console.log('debug---',this.wyLevel)
            
        },
        methods:{ 
        }
   }
</script>

<style>

</style>
